<template>
	<base-page backgroundColor="white">
		<view class="px-16 py-8 fs-12 bg-default">您的账户信息有误，为确保资金安全及佣金顺利提现，请修改后重新提交。</view>
		<view v-if="errorMsg" class="h-36 flex item-center px-16 leading-17 fs-12 color-primary" style="background:rgba(250, 69, 67, 0.30);">
			{{ errorMsg }}
		</view>
		<view class="p-16 fs-14 text-color-regular">
			<view class="flex item-center">
				<text class="mr-8 flex-shrink" style="width:80px;">姓名：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入姓名" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">身份证号：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入身份证号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">持卡人证件有效期：</text>
				<view class="inline-flex item-center">
					<view class="inline-flex item-center mr-32">
						<image src="@/static/svg/radio-default.svg" class="size-12 mr-4"></image>
						<text class="text-color-hint fs-14">长期有效</text>
					</view>
					<view class="inline-flex item-center">
						<image src="@/static/svg/radio-selected.svg" class="size-12 mr-4"></image>
						<text class="text-color-regular fs-14">非长期有效</text>
					</view>
				</view>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink">营业执照有效开始日期：</text>
				<uni-datetime-picker placeholder="请选择营业执照有效期开始日期" type="date">
					<view class="flex justify-between item-center h-36 px-12 bg-default radius-12">
						<text class="fs-14 text-color-regular">2012-10-12</text>
						<image src="@/pagesB/static/icon-calendar.png" class="size-16"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink">营业执照有效截止日期：</text>
				<uni-datetime-picker placeholder="请选择营业执照有效期结束日期" type="date">
					<view class="flex justify-between item-center h-36 px-12 bg-default radius-12">
						<text class="fs-14 text-color-regular">2012-10-12</text>
						<image src="@/pagesB/static/icon-calendar.png" class="size-16"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="mt-16">
				<view class="flex item-center">
					<text class="mr-8 flex-shrink" style="width:80px;">账户名称：</text>
					<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入账户名称" placeholder-class="text-color-hint" />
				</view>
				<view class="fs-12 leading-17 mt-8" style="margin-left:84px;color:rgba(0, 0, 0, 0.30);">请填写与入驻时提供的身份证一致的银行卡信息</view>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡号：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入银行卡号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行所在地：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请选择银行卡所在地" placeholder-class="text-color-hint" />
			</view>
		</view>
		
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认</view>
		</template>
	</base-page>
</template>

<script setup>
	import { ref, computed, getCurrentInstance } from 'vue'
	
	const instance = getCurrentInstance()
	
	const errorMsg = ref('身份证号不正确')
	
	const disableSubmit = computed(() => {
		return false
	})
	
	/**
	 * 点击下一步，提交用户业务入驻，返回汇付入驻结果
	 * 入驻失败，绑定银行卡页面，提示失败原因，可重新提交；
	 * 入驻成功，调用灵活用工个人签约，进行签约
	 */
	const submit = () => {
		if (disableSubmit.value) return
		
		// 入驻成功
		uni.navigateTo({
			url: '/pagesB/withdraw/sign',
			events: {
				onSignResult(res) {
					console.log('签约结果', res)
					if (res.result) {
						const eventChannel = instance.ctx.getOpenerEventChannel()
						eventChannel.emit('onBindingSuccess', { result: true })
						uni.navigateBack()
					} else {
						errorMsg.value = '身份证号不正确，请修改后重新提交'
					}
				}
			}
		})
	}
</script>
